<template>
	<view class="">
		<!-- 顶部背景图片 -->
		<view style="height: 320rpx;">
			<image :src="mine_bg" 
			style="width: 100%;height: 320rpx;" mode="scaleToFill"></image>
		</view>
		<view class="top-bg">
			<view style="height: 74rpx;"></view>
			<view class="top-bg-center">
				<view class="head-image-view">
					<image :src="headImage" class="head-image"></image>
				</view>	
				<view style="margin-left: 26rpx;">
					<view >
						<text  class="user-name">{{realName}}</text>
						
						<!-- <button v-if="!isAuth"
						hover-class='none' 
								withCredentials="true" 
								class="user-name"
								size="mini" @click="getUserProfile">请登录</button> -->
					</view>
					
					<view style="margin-top: 12rpx;">
						<text v-if="isPhone" class="user-phone">{{userPhone}}</text>
						
						<button v-if="!isPhone"
						hover-class='none'
								withCredentials="true" 
								class="user-phone2"
								size="mini" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
								<text>绑定手机号</text>
								<image src="../../../../static/phone/mine_to.png" 
								style="width: 8rpx;height: 14rpx;margin-left: 16rpx;"></image>
								</button>
					</view>
					
				</view>
				
				<view class="top-bg-center-right"  @click="clickInfo">
					编辑资料
				</view>
				
			</view>
			
			<view style="height: 106rpx;"></view>
		</view>
		
		<!-- 客户端显示 -->
		<view class="" v-if="role=='0'">
			
			<view class="item" @click="clickNotice">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_notice.png"
					style="width: 34rpx;height: 36rpx;"></image>
				</view>
				
				<text class="item-tv">消息</text>
				
				<image src="../../../../static/arrow_right.png"
					class="arrow_right"></image>
			</view>
			<view class="line"></view>
			
			<view class="item" @click="clickOrder">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_order.png"
					style="width: 60rpxrpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">订单与服务</text>
				
				<image src="../../../../static/arrow_right.png"
					class="arrow_right"></image>
			</view>
			<view class="line"></view>
			
			<view class="item" @click="clickLink">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_link.png"
					style="width: 60rpxrpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">关联客户</text>
				
				<image src="../../../../static/arrow_right.png"
					class="arrow_right"></image>
			</view>
			<view class="line"></view>
			
			
		</view>
		<!-- 管理端显示 -->
		<view v-if="role!='0'">
			<view class="item" @click="clickNotice">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_notice.png"
					style="width: 34rpx;height: 36rpx;"></image>
				</view>
				
				<text class="item-tv">消息</text>
				
				<image src="../../../../static/arrow_right.png"
					class="arrow_right"></image>
			</view>
			<view class="line"></view>
			
			<view class="item" @click="clickCT">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_chongtu.png"
					style="width: 60rpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">冲突查询</text>
				
				<image src="../../../../static/arrow_right.png"
					class="arrow_right"></image>
			</view>
			<view class="line"></view>
			
			<view class="item" @click="clickWork">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_work.png"
					style="width: 60rpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">工作组</text>
				
				<image src="../../../../static/arrow_right.png"
					class="arrow_right"></image>
			</view>
			<view class="line"></view>
			
			<view class="item" @click="clickOnPc">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_file.png"
					style="width: 60rpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">文件列表</text>
				
				<text class="item-tv-pc">请在电脑端打开</text>
				
				
			</view>
			<view class="line"></view>
			<view class="item" @click="clickOnPc">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_long.png"
					style="width: 60rpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">工作时长</text>
				
				<text class="item-tv-pc">请在电脑端打开</text>
				
				
			</view>
			<view class="line"></view>
			
			<view class="item" @click="clickOnPc">
				<view class="item-sss">
					<image src="../../../../static/phone/mine_under.png"
					style="width: 60rpx;height: 60rpx;"></image>
				</view>
				
				<text class="item-tv">后台管理</text>
				
				<text class="item-tv-pc">请在电脑端打开</text>
				
				
			</view>
			<view class="line"></view>
			
		</view> 
		
		<view class="view-bottom-s">
			<view class="view-bottom-b" @click="exit">
				退出登录
			</view>
		</view>
		
		<tab-bar :selected="3" ref='tabBar'></tab-bar>
	</view>
</template>

<script>
	import tabBar from '../../common/tab-bar.vue'
	import verify from '@/pages/utils/verifyUtils.js'
	let app = ""
	export default{
		components:{tabBar},
		data(){
			return{
				role:'0',
				headImage:getApp().globalData.baseImageUrl+'/mine_moren.png',
				// isAuth:false,
				realName:'',
				isPhone:false,
				userPhone:'',
				
				userInfo:null,
				mine_bg:getApp().globalData.baseImageUrl+'/mine_bg.png'
			}
		},
		onLoad() {
			let _this = this
			app = getApp()
			
			
		},
		onShow() {
			let _this = this
			_this.initData()
		
			
		},
		methods:{
			initData(){
				let _this = this
				_this.role = app.globalData.role
				// _this.isAuth = app.globalData.isAuth
				_this.isPhone = app.globalData.isPhone
				
				_this.userInfo = app.globalData.userInfo
				console.log('userInfo',_this.userInfo)
				if(_this.userInfo!=null){
					_this.realName = verify.isNotEmpty(_this.userInfo.realName) ? _this.userInfo.realName:'微信用户'
					_this.userPhone = _this.userInfo.mobile
					
					if(verify.isNotEmpty(_this.userInfo.avatarPic)){
						if(_this.userInfo.avatarPic.indexOf('http')>-1){
							_this.headImage = _this.userInfo.avatarPic
						}else{
							let avatarPic = _this.$imageUrls({picUrls: _this.userInfo.avatarPic})
							_this.headImage = avatarPic
						}
						
					}
						
					
				}
			},
			/**
			 * 点击了获取用户信息
			 */
			// getUserProfile(){
				
			// 	let _this = this
			// 	uni.getUserProfile({
			// 		desc:'完善用户资料',
			// 		success(res) {
			// 			console.log(res)
			// 			_this.getWxInfo(res)
						// _this.isAuth = true
						// _this.userInfo = res.userInfo
						// _this.headImage = res.userInfo.avatarUrl
						// _this.realName = res.userInfo.realName
			// 		}
			// 	})
			
			// },
			// async getWxInfo(data){
			// 	let _this = this
			// 	uni.showLoading({
					
			// 	})
			// 	const res = await _this.$myRequest({
			// 		url:`/wx/ma/user/${app.globalData.appidKey}/info`,
			// 		data:{
			// 			sessionKey:app.globalData.sessionKey,
			// 			signature:data.signature,
			// 			rawData:data.rawData,
			// 			encryptedData:data.encryptedData,
			// 			iv:data.iv
			// 		}
			// 	})
			// 	uni.hideLoading()
			// 	console.log('获取info',res)
			// 	if(res.data.code==200){
			// 		_this.getUser()
			
			// 	}
			// },
			async getUser(){
				let _this = this
			
				const res = await _this.$myRequest({
					url: "/oauth/userinfo",
					header: {
						"Authorization":"Basic ZG90Z286ZG90Z28=",
						"token":uni.getStorageSync("accessToken")
					},
				})
				
				console.log('返回用户信息结果',res)
				if(res.data.code==200){
					
					app.globalData.role = res.data.data.userType.code
					//此 实际情况以登录返回为准
					_this.role = app.globalData.role
					
					_this.$refs.tabBar.initRole()
					
			
					// let avatarPic = res.data.data.avatarPic
					// if(avatarPic==null || avatarPic== '' || avatarPic==undefined){
					// 	_this.isAuth = false
					// 	app.globalData.isAuth = false
					// }else{
					// 	app.globalData.userInfo = res.data.data
					// 	app.globalData.isAuth = true
					// 	_this.isAuth = true
					// }
					app.globalData.userInfo = res.data.data
					let mobile = res.data.data.mobile
					
					if(mobile==null || mobile== '' || mobile==undefined){
						_this.isPhone = false
						app.globalData.isPhone = false
					}else{
						app.globalData.userInfo.mobile = mobile
						app.globalData.isPhone = true
						_this.isPhone = true
					}
					
					_this.initData()
				

				}
			},
			
			/**
			 * 点击了获取手机号
			 */
			getphonenumber(e){
				console.log(e)
				let code = e.detail.code
				let encryptedData = e.detail.encryptedData
				let errMsg = e.detail.errMsg
				let iv = e.detail.iv
				
				let _this = this
				
				_this.getWxPhone(encryptedData,iv,code)
				
			},
			async getWxPhone(data1,data2,data3){
				let _this = this
				uni.showLoading({
					
				})
				const res = await _this.$myRequest({
					url:`/wx/ma/user/${app.globalData.appidKey}/phone`,
					data:{
						sessionKey:app.globalData.sessionKey,
						encryptedData:data1,
						iv:data2,
						code:data3
					}
				})
				uni.hideLoading()
				console.log('获取手机号',res)
				if(res.data.code==200){
					app.globalData.userInfo.mobile = res.data.data.phoneNumber
					_this.isPhone = true
					app.globalData.isPhone = true
					_this.$EventBus.$emit('refreshData');
					_this.initData()
				}
				
				
			},
			
			/**
			 * 点击了编辑资料
			 */
			clickInfo(){
			
				if(!this.isPhone){
					uni.showToast({
						title:'请先绑定手机',
						icon:'none',
						duration:1500
					})
					
					return
				}
				uni.navigateTo({
					url:'./info/info'
				})

			},
			/**
			 * 点击了消息
			 * 复用同一个方法，要区分登录用户类型
			 */
			clickNotice(){
				//区分 管理端 还是 客户端
				// if(this.role===0){
					
				// }else if(this.role===1){
					
				// }
				// if(!this.isAuth){
				// 	uni.showToast({
				// 		title:'请先登录',
				// 		icon:'none',
				// 		duration:1500
				// 	})
					
				// 	return
				// }
				if(!this.isPhone){
					uni.showToast({
						title:'请先绑定手机',
						icon:'none',
						duration:1500
					})
					
					return
				}
				
				uni.navigateTo({
					url:'./notice/notice'
				})
			},
			
			/**
			 * 客户端-点击了订单与服务
			 */
			clickOrder(){
				// if(!this.isAuth){
				// 	uni.showToast({
				// 		title:'请先登录',
				// 		icon:'none',
				// 		duration:1500
				// 	})
					
				// 	return
				// }
				if(!this.isPhone){
					uni.showToast({
						title:'请先绑定手机',
						icon:'none',
						duration:1500
					})
					
					return
				}
				uni.navigateTo({
					url:'./orderAndServe/orderAndServe'
				})
				
				
			},
			/**
			 * 客户端-点击了关联客户
			 */
			clickLink(){
				// if(!this.isAuth){
				// 	uni.showToast({
				// 		title:'请先登录',
				// 		icon:'none',
				// 		duration:1500
				// 	})
					
				// 	return
				// }
				if(!this.isPhone){
					uni.showToast({
						title:'请先绑定手机',
						icon:'none',
						duration:1500
					})
					
					return
				}
				uni.navigateTo({
					url:'./link/linkList'
				})
			},
			
			/**
			 * 管理端-冲突查询
			 */
			clickCT(){
				// if(!this.isAuth){
				// 	uni.showToast({
				// 		title:'请先登录',
				// 		icon:'none',
				// 		duration:1500
				// 	})
					
				// 	return
				// }
				if(!this.isPhone){
					uni.showToast({
						title:'请先绑定手机',
						icon:'none',
						duration:1500
					})
					
					return
				}
				uni.navigateTo({
					url:'../../manage/mine/conflictCheck/conflictCheck'
				})
			},
			/**
			 * 管理端-工作组
			 */
			clickWork(){
				// if(!this.isAuth){
				// 	uni.showToast({
				// 		title:'请先登录',
				// 		icon:'none',
				// 		duration:1500
				// 	})
					
				// 	return
				// }
				if(!this.isPhone){
					uni.showToast({
						title:'请先绑定手机',
						icon:'none',
						duration:1500
					})
					
					return
				}
				uni.navigateTo({
					url:'../../manage/mine/workTeam/workTeam'
				})
			},
			/**
			 * 管理端-用电脑端打开
			 */
			clickOnPc(){
				uni.showModal({
					title:'温馨提示',
					content:'请用电脑端打开',
					showCancel:false,
				})
			},
			
			/**
			 * 退出
			 */
			exit(){
				uni.showModal({
					title:'提示',
					content:'确定要退出该账号吗？',
					success: (res) => {
						if(res.confirm){
							this.doExit()
							
						}else{
							
						}
					}
				})
			},
			
			async doExit(){
				let _this = this
				uni.showLoading({
					
				})
				
				const logintout = await _this.$myRequest({
					url:`/oauth/login/logout`,
					header: {
						"Content-Type":"application/json",
						"token":uni.getStorageSync("accessToken")
					},
					method: 'POST', //默认是GET
				
				})
				console.log('退出结果',logintout)
				if(logintout.data.code==200){
					uni.hideLoading()
					uni.showToast({
						title:'退出成功!',
						icon:'success'
					})
					uni.reLaunch({
						url:'/pages/phone/customs/home/home'
					})
				}
			},
			
			
		},
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.top-bg{
		width: 100%;
		height: 320rpx;
		margin-top: -320rpx;
	}
	
	.top-bg-center{
		height: 140rpx;
		display: flex;
		align-items: center;

	}
	.head-image-view{
		width: 140rpx;
		height: 140rpx;
		background: #FFFFFF;
		box-shadow: -6rpx 16rpx 20rpx 0rpx rgba(12,119,182,0.0900);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 140rpx;
		margin-left: 30rpx;
	}
	.head-image{
		width: 128rpx;
		height: 128rpx;
		border-radius: 128rpx;
	}
	
	.item{
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.item-sss{
		width: 60rpx;
		height: 60rpx;
		margin-left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.item-tv{
		margin-left: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.arrow_right{
		width: 8rpx;
		height: 14rpx;
		margin-left: auto;
		margin-right: 32rpx;
	}
	.line{
		margin-left: 112rpx;
		margin-right: 32rpx;
		background-color: #eeeeee;
		height: 1rpx;
	}
	.item-tv-pc{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: auto;
		margin-right: 32rpx;
	}
	
	.user-name{
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.user-phone{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	
	.top-bg-center-right{
		width: 140rpx;
		height: 48rpx;
		background: #2DA9C5;
		border-radius: 26rpx;
		margin-left: auto;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 24rpx;
	}
	.user-phone2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
	}
	button{
	    line-height: 1;
	    text-align: left;
	    font-size: 30rpx;
	    padding-left: 0;
	    padding-right: 0;
	    background-color: transparent;
	}
	button::after {
		 border: none;
	}
	

	.view-bottom-s{
		margin-top: 160rpx;
		width: 100%;
		height: 108rpx;
		display: flex;
		align-items: center;
		justify-self: center;
	}
	.view-bottom-b{
		width: 486rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		margin-left: 132rpx;
		line-height: 50rpx;
	}	
</style>